//用户状态
{
  window.onload = function () {
    let oLogin = document.querySelector('.login1')
    let flag = localStorage.getItem('token')
    let user = localStorage.getItem('user')
    if (flag) {
      oLogin.innerHTML = `<a class="red" href="javascript:;">Hi, ${user}</a><a class="exit" href="javascript:;">&nbsp;&nbsp; [退出]&nbsp;&nbsp;</a><em class="card"></em><a href="./html/shopping.html">购物车</a>&nbsp;<b class='red'></b>`

      let oExit = document.querySelector('.exit')

      oExit.addEventListener('click', function () {
        localStorage.removeItem('user')
        localStorage.removeItem('token')
        location.reload()
      })
      // 购物车数据
      let shopCarCount = document.querySelector('.welcome b')
      // 购物车里面
      if (localStorage.getItem('shopArr') === null) {
        var count = 0
      } else {
        count = JSON.parse(localStorage.getItem('shopArr')).length
      }
      shopCarCount.innerHTML = count
    }
  }
}
//导航二级
{
  let province = document.querySelector('.province')
  let goWhere = document.querySelector('.go-where')
  //初始化
  ajax({
    url: '../../Dangdangshopping/data/province.json',
    success(res) {
      let obj = JSON.parse(res).data
      goWhere.innerHTML = `送至： ${obj[0]}`
      //渲染省份
      obj.forEach(ele => {
        province.innerHTML += `<li><a href="javascript:;">${ele}</a></li>`
      })
      //更换省份
      province.addEventListener('click', e => {
        goWhere.innerHTML = `送至： ${e.target.innerText}`
      })
      goWhere.addEventListener('mouseover', () => {
        province.style.display = 'block'
      })
      goWhere.addEventListener('mouseout', () => {
        province.style.display = 'none'
      })
      province.addEventListener('mouseover', () => {
        province.style.display = 'block'
      })
      province.addEventListener('mouseout', () => {
        province.style.display = 'none'
      })
    },
  })
  //导航栏初始化
  let navRight = document.querySelector('.nav-right')
  ajax({
    url: '../../Dangdangshopping/data/nav.json',
    success(res) {
      let obj = JSON.parse(res).data
      obj.forEach((ele, index) => {
        navRight.innerHTML += `<li>
    <a href="javascript:;" class="${ele.erJi ? 'bg' : ''}"
    data-s=${ele.erJi ? index : null}>
    ${ele.msg}</a>
    <div class="nav-list-right"></div></li>`
      })
      let navErj = navRight.querySelectorAll('.nav-list-right')
      //生成二级
      navRight.addEventListener('mouseover', e => {
        if (e.target.tagName === 'A') {
          if (e.target.dataset.s !== 'null') {
            let erJ = e.target.parentNode.children[1]
            let erJN = obj[e.target.dataset.s].erJi.msg
            erJ.innerHTML = ''
            for (let i = 0; i < erJN.length; i++) {
              erJ.innerHTML += `<p>${erJN[i]}</p>`
            }
            erJ.style.display = 'block'
          }
        }
      })
      navRight.addEventListener('mouseout', e => {
        if (e.target.tagName === 'A') {
          e.target.nextElementSibling.style.display = 'none'
        }
      })
      navErj.forEach(ele => {
        ele.addEventListener('mouseover', e => {
          ele.style.display = 'block'
        })
        ele.addEventListener('mouseout', e => {
          ele.style.display = 'none'
        })
      })
    },
  })
}

//加入购物车数据
{
  // 先把数据拿过来
  let shopArr = JSON.parse(localStorage.getItem('shopArr'))
  let oList = document.querySelector('tbody')
  let oTotal = document.querySelectorAll('.total')
  let checkAll = document.querySelectorAll('.checkAll')

  shopArr.forEach(ele => {
    ele.flag = false
  })

  getData()
  function getData() {
    oList.innerHTML = ''
    // 计算总价钱
    var sum = 0
    shopArr.forEach(ele => {
      oList.innerHTML += ` <tr>
              <td>
                <a href="javascript:;"
                  ><input type="checkbox" ${
                    ele.flag ? 'checked' : ''
                  } goodsId="${ele.list_id}" /
                  ></a>
              </td>
              <td>
                <img src="${ele.list_big_pic}" alt="" />
              </td>
              <td>${ele.list_name}</td>
              <td>¥${ele.list_price}</td>
              <td>
                <input type="button" value="-" class="reduce" goodsId="${
                  ele.list_id
                }" />
                <input type="text" value="${ele.count}" />
                <input type="button" value="+" class="add"  goodsId="${
                  ele.list_id
                }" />
              </td>
              <td>¥${(ele.list_price * ele.count).toFixed(2)}</td>
              <td>
                <a href="javascript:;">移入收藏</a>
                <a href="javascript:;" class="del" goodsId="${
                  ele.list_id
                }">删除</a>
              </td>
            </tr>`

      if (ele.flag) {
        sum += ele.list_price * ele.count
      }
    })
    //总价
    oTotal[0].innerHTML = `¥${sum.toFixed(2)}`
    oTotal[1].innerHTML = `¥${sum.toFixed(2)}`
    //结算按钮颜色
    let settle = document.querySelector('.settle')
    if (oTotal[1].innerText.substr(1) - 0 !== 0) {
      settle.style.backgroundColor = '#ff2832'
    } else {
      settle.style.backgroundColor = '#e1e1e1'
    }
    localStorage.setItem('shopArr', JSON.stringify(shopArr))
  }

  checkAll[0].addEventListener('change', function () {
    if (this.checked) {
      shopArr.forEach(ele => {
        ele.flag = true
      })
      checkAll[1].checked = true
      count = shopArr.length
    } else {
      shopArr.forEach(ele => {
        ele.flag = false
      })
      checkAll[1].checked = false
      count = 0
    }
    getData()
  })
  checkAll[1].addEventListener('change', function () {
    if (this.checked) {
      shopArr.forEach(ele => {
        ele.flag = true
      })
      checkAll[0].checked = true
      count = shopArr.length
    } else {
      shopArr.forEach(ele => {
        ele.flag = false
      })
      checkAll[0].checked = false
      count = 0
    }
    getData()
  })

  let count = 0

  oList.addEventListener('click', function (ev) {
    // 选中商品
    if (ev.target.type === 'checkbox') {
      let id = ev.target.getAttribute('goodsId')

      shopArr.forEach(ele => {
        if (ele.list_id === id) {
          ele.flag = ev.target.checked
        }
      })

      if (ev.target.checked) {
        count++
      } else {
        count--
      }
      if (count === shopArr.length) {
        checkAll.forEach(el => {
          el.checked = true
        })
      } else {
        checkAll.forEach(el => {
          el.checked = false
        })
      }

      getData()
    }

    // 商品数量增加
    let verify = 0
    if (ev.target.className === 'add') {
      let id = ev.target.getAttribute('goodsId')
      shopArr.forEach(ele => {
        if (ele.list_id === id) {
          ele.count++
          ele.flag = true
        }
        if (ele.flag === true) {
          verify++
        }
      })
      if (shopArr.length === verify) {
        checkAll.forEach(el => {
          el.checked = true
        })
      }
      getData()
    }
    // 商品数量减少
    if (ev.target.className === 'reduce') {
      let id = ev.target.getAttribute('goodsId')
      shopArr.forEach(ele => {
        if (ele.list_id === id) {
          ele.count--
          if (ele.count < 1) {
            ele.count = 1
          }
          ele.flag = true
        }
        if (ele.flag === true) {
          verify++
        }
      })
      if (shopArr.length === verify) {
        checkAll.forEach(el => {
          el.checked = true
        })
      }

      getData()
    }
    // 删除商品
    if (ev.target.className.includes('del')) {
      let id = ev.target.getAttribute('goodsId')

      shopArr.forEach((ele, index) => {
        if (ele.list_id === id) {
          shopArr.splice(index, 1)
        }
      })

      getData()
    }
  })
}
